<template>
  <div class="editor_wrapper">
    <quill-editor :value="content" class="editor" ref="myQuillEditor" :options="editorOption" :disabled="disabled" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" @change="onEditorChange"></quill-editor>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
// import * as Quill from 'quill'
import Quill from 'quill'
// import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
import ParamTag from './paramTag'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
// 默认div标签换行
var Block = Quill.import('blots/block')
Block.tagName = 'DIV'
Quill.register(Block, true)

// text indext文字缩进
const Parchment = Quill.import('parchment')
const pixelLevels = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
const TAB_MULTIPLIER = 13

class IndentAttributor extends Parchment.Attributor.Style {
  add (node, value) {
    return super.add(node, `${+value * TAB_MULTIPLIER}px`)
  }
  value (node) {
    return parseFloat(super.value(node)) / TAB_MULTIPLIER || undefined // Don't return NaN
  }
}

const IndentStyle = new IndentAttributor('indent', 'margin-left', {
  scope: Parchment.Scope.BLOCK,
  whitelist: pixelLevels.map(value => `${value * TAB_MULTIPLIER}px`)
})
Quill.register({ 'formats/indent': IndentStyle }, true)

// Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)

// 字体配置
let Font = Quill.import('attributors/style/font')
var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Calibri', 'Times-New-Roman', 'sans-serif']
Font.whitelist = fonts
Quill.register(Font, true)

// 字体大小配置
var size = ['9px', '12px', false, '16px', '18px', '20px', '22px', '26px', '28px', '32px', '36px', '48px', '56px', '72px']
var Size = Quill.import('attributors/style/size')
Size.whitelist = size
Quill.register(Size, true)

// 颜色配置
var BackgroundStyle = Quill.import('attributors/style/background')
var ColorStyle = Quill.import('attributors/style/color')
Quill.register(BackgroundStyle, true)
Quill.register(ColorStyle, true)

var AlignStyle = Quill.import('attributors/style/align')
Quill.register(AlignStyle, true)

// 变量标签配置
Quill.register(ParamTag)

export default {
  props: {
    content: { type: String },
    hideToolBar: { type: Boolean },
    simpleToolBar: { type: Boolean },
    height: { type: String },
    minHeight: { type: String },
    constraintLength: { type: Boolean },
    disabled: { type: Boolean },
    bounds: { type: String, default: '.editor_wrapper' }
  },
  model: { prop: 'content', event: 'change' },
  components: { quillEditor },
  computed: {
    editorOption () {
      if (this.hideToolBar) {
        return { modules: { toolbar: false }, placeholder: '' }
      }
      if (this.simpleToolBar) {
        return { modules: { toolbar: [ ['bold', 'italic', 'underline'], [{ 'list': 'ordered' }, { 'list': 'bullet' }], [{ 'indent': '-1' }, { 'indent': '+1' }], ['clean'] ] }, placeholder: '' }
      }
      return {
        bounds: this.bounds,
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline'],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'size': size }],
            [{ 'font': fonts }],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'align': [] }],
            ['link', 'image', 'video'],
            [{ clean: { tooltip: '清理样式' } }]
          ],
          history: {
            delay: 2000,
            maxStack: 500,
            userOnly: true
          },
          // imageDrop: true,
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
          }
        },
        placeholder: ''
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      let dom = this.$refs.myQuillEditor.$el
      // 高度
      if (this.height) {
        dom.querySelector('.ql-container').style.height = this.height
      } else {
        dom.querySelector('.ql-container').style.minHeight = this.minHeight ? this.minHeight : '100px'
        dom.querySelector('.ql-editor').style.minHeight = this.minHeight ? this.minHeight : '100px'
      }
      // simpletoolbar位置
      if (this.simpleToolBar) {
        let toolbar = dom.querySelector('.ql-toolbar')
        toolbar.className += ' fr'
        toolbar.style.marginTop = '-37px'
      }
    })
  },
  methods: {
    onEditorBlur (quill) {
      this.$emit('onEditorBlur')
    },
    onEditorFocus (quill) {
      this.$emit('focus')
    },
    onEditorReady (quill) {
      this.$emit('editor-ready', quill)
    },
    onEditorChange ({ quill, html, text }) {
      // getlength = 实际 + 1
      const limit = 140 // 短信限制字数
      if (this.constraintLength) {
        quill.deleteText(limit, quill.getLength())
        this.$nextTick(() => {
          quill.setSelection(quill.getLength())
        })
      }
      this.$emit('change', html)
      this.$emit('edit', html, text, quill)
    }
  }
}
</script>

<style lang="stylus">
@import './editor'
.ql-toolbar.ql-snow
  padding 6px
.ql-container
  box-sizing border-box
  transition 0.2s
.ql-toolbar.ql-snow + .ql-container.ql-snow
  border-top 1px solid #d9d9d9
.ql-editor
  padding 4px 6px
.ql-toolbar.ql-snow
  border-bottom none
  border-color #d9d9d9
.ql-container.ql-snow
  border-color #d9d9d9
</style>
